<template>
  <div class="load_7">
    <div></div>
    <div></div>
  </div>
</template>
<script setup>
import { computed } from "vue";
const { color, size } = defineProps({
  color: {
    type: String,
    default: "#61e8ea",
  },
  size: {
    type: Number,
    default: 64,
  },
});
const width = computed(() => `${size}px`);
const height = computed(() => `${size}px`);
</script>
<style scoped>
.load_7 {
  display: inline-block;
  position: relative;
  width: v-bind(width);
  height: v-bind(height);
}
.load_7 div {
  position: absolute;
  border-width: 4px;
  border-color: v-bind(color);
  opacity: 1;
  border-radius: 50%;
  animation: load_7 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.load_7 div:nth-child(2) {
  animation-delay: -1s;
}
@keyframes load_7 {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}
</style>
